/**
* 员工管理
*/
<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/AppMain' }">主页</el-breadcrumb-item>
      <el-breadcrumb-item>员工管理</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 搜索筛选 -->
    <el-form :inline="true" class="user-search" align="left">
      <el-form-item label="搜索：">
        <el-input size="small" v-model="queryForm.name" placeholder="输入姓名查询"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button size="small" type="primary" icon="el-icon-search" @click="list">搜索</el-button>
        <el-button size="small" type="success" icon="el-icon-plus" @click="dictAdd">添加</el-button>
        <el-button size="small" type="danger" v-if="multipleSelectionFlag" @click="popDelete">
          批量删除
        </el-button>
        <el-dialog :visible.sync="multiDeleteVisible" title="提示" width="30%">
          <span>确定要删除吗</span>
          <span slot="footer">
            <el-button type="primary" @click="multiDelete">确 定</el-button>
            <el-button @click="multiDeleteVisible = false">取 消</el-button>
          </span>
        </el-dialog>
      </el-form-item>
    </el-form>
    <!-- 表格 -->
    <el-table :data="tableData" style="width: 100%;" height="400" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" align="center">
        </el-table-column>
      <el-table-column label="编号" prop="id">

      </el-table-column>
      <el-table-column label="姓名" prop="name">

      </el-table-column>
      <el-table-column label="用户名" prop="userName">

      </el-table-column>
      <el-table-column label="手机" prop="mobile">

      </el-table-column>
      <el-table-column label="邮箱" prop="email">

      </el-table-column>
      <el-table-column label="创建时间" prop="createTime">


      </el-table-column>

      <el-table-column label="操作" width="330px;">
        <template slot-scope="scope">
          <el-button title="编辑" size="mini" @click="Update(scope.$index, scope.row)" class="el-icon-edit">
          </el-button>
          <el-button title="删除" type="danger" size="mini" @click="Delete(scope.$index, scope.row)" class="el-icon-delete">
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 模态框 -->
    <el-dialog title="新增" :visible.sync="dialogMergeFormVisible">
      <el-form :model="mergeForm" :rules="mergeFormRules" ref="mergeForm" label-width="70px">
        <!-- <el-form-item label="ID" prop="dictId">
		      <el-input v-model="mergeForm.dictId"></el-input>
		    </el-form-item> -->
        <el-form-item label="姓名" prop="name">
          <el-input v-model="mergeForm.name"></el-input>
        </el-form-item>
        <el-form-item label="用户名" prop="userName">
          <el-input v-model="mergeForm.userName"></el-input>
        </el-form-item>
        <el-form-item label="手机" prop="mobile">
          <el-input v-model="mergeForm.mobile"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="mergeForm.password"></el-input>
        </el-form-item>
        <el-form-item label="邮件" prop="email">
          <el-input v-model="mergeForm.email"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="dialogMergeFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="doSubmit">确 定</el-button>
      </div>
    </el-dialog>



    <!-- 模态框 -->
    <el-dialog title="修改" :visible.sync="dialogMergeFormVisible2">
      <el-form :model="mergeForm" :rules="mergeFormRules" ref="mergeForm" label-width="70px">
        <!-- <el-form-item label="ID" prop="dictId">
		      <el-input v-model="mergeForm.dictId"></el-input>
		    </el-form-item> -->
        <el-form-item label="姓名" prop="name">
          <el-input v-model="mergeForm.name"></el-input>
        </el-form-item>
        <el-form-item label="用户名" prop="userName">
          <el-input v-model="mergeForm.userName"></el-input>
        </el-form-item>
        <el-form-item label="手机" prop="mobile">
          <el-input v-model="mergeForm.mobile"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="mergeForm.password"></el-input>
        </el-form-item>
        <el-form-item label="邮件" prop="email">
          <el-input v-model="mergeForm.email"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="dialogMergeFormVisible2 = false">取 消</el-button>
        <el-button type="primary" @click="up">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 分页标签 -->
    <div class="block">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="queryForm.page"
        :page-sizes="[10, 20, 50, 100]" :page-size="queryForm.rows" layout="total, sizes, prev, pager, next, jumper"
        :total="queryForm.total">
      </el-pagination>
    </div>


  </div>
</template>

<script>
  export default {
    data: function() {
      return {
        multipleSelectionFlag: false,
        multiDeleteVisible: false,
        multipleSelection: '',
        // checked: true,
        queryForm: {
          name: null,
          page: 1,
          rows: 10,
          total: 0
        },
        dialogMergeFormVisible: false,
        dialogMergeFormVisible2: false,
        mergeForm: {
          id: null,
          name: null,
          userName: null,
          mobile: null,
          password: null,
          email: null
        },
        mergeFormRules: {
          // dictId: [],
          // dictIsEditable: [],
          name: [{
            required: true,
            message: '请输入姓名',
            trigger: 'blur'
          }, {
            min: 2,
            max: 6,
            message: '长度在 2 到 6 个字符',
            trigger: 'blur'
          }, ],
          userName: [{
            required: true,
            message: '请输入用户名',
            trigger: 'blur'
          }, {
            min: 3,
            max: 15,
            message: '长度在 3 到 15 个字符',
            trigger: 'blur'
          }, ],
          mobile: [{
            required: true,
            message: '手机号不能为空',
            trigger: 'blur'
          }, {
            min: 0,
            max: 11,
            message: '长度在 0 到 11 个字符',
            trigger: 'blur'
          }, {
            pattern: /^0{0,1}(1[0-9][0-9]|15[7-9]|153|156|18[7-9])[0-9]{8}$/,
            message: '手机号格式不对',
            trigger: 'blur'
          }],
          password: [{
            required: true,
            message: '请输入密码',
            trigger: 'blur'
          }, {
            min: 6,
            max: 30,
            message: '长度在 6 到 30 个字符'
          }, {
            pattern: /^(\w){6,20}$/,
            message: '只能输入6-20个字母、数字、下划线'
          }],
          email: [{
              required: true,
              message: '请输入邮箱号',
              trigger: 'blur'
            },
            {
              pattern: /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/,
              message: '邮件格式不对',
              trigger: 'blur'
            }
          ],
        },
        tableData: []
      };
    },
    methods: {
      list: function() {
        // console.log(this.mergeForm.dictIsEditable);
        this.axios.post(this.axios.urls.EMPLOYEE_LIST, this.queryForm).then((response) => {
          this.tableData = response.data.result;
          this.queryForm.page = response.data.page;
          this.queryForm.rows = response.data.rows;
          this.queryForm.total = response.data.total;
          // this.mergeForm.dictIsEditable
        });
      },
      popDelete: function() {
        // alert("del")
        this.multiDeleteVisible = true
        // this.multipleSelection(scope.row)/
      },
      handleSelectionChange(val) {
        // alert(val);
        // console.log(val);
        this.multipleSelection = val;
        this.multipleSelectionFlag = true;
        if (this.multipleSelection.length == 0) {
          // 如不进行判断则勾选完毕后批量删除按钮还是会在
          this.multipleSelectionFlag = false;
        }
      },
      multiDelete() {
        this.multiDeleteVisible = false;
        let checkArr = JSON.stringify(this.multipleSelection);
        // console.log(checkArr);
        this.axios.post(this.axios.urls.EMPLOYEE_DE , {id:checkArr}).then((response) => {
          console.log("checkArr");
          this.$message({
            type: 'success',
            message: '删除成功!',
          });
          this.list();
        })
      },

      doSubmit: function() {
        console.log("mergeForm");
        // alert("12312")
        this.$refs['mergeForm'].validate((valid) => {
          if (valid) {
            // alert('submit!');
            this.axios.post(this.axios.urls.EMPLOYEE_MERGE, this.mergeForm).then((response) => {
              // alert(this.mergeForm)
              // this.tableData = response.data.result;
              this.$message({
                type: 'success',
                message: response.data.message
              });
              if (!this.mergeForm.id) { //新增操作
                this.dialogMergeFormVisible = false;
                this.queryForm.page = 1;
              }
              this.list()
            })
          }
        });
      },
      up: function() {
        console.log("mergeForm");

        this.$refs['mergeForm'].validate((valid) => {
          if (valid) {
            // alert('submit!');
            this.axios.post(this.axios.urls.EMPLOYEE_UPDATE, this.mergeForm).then((response) => {
              // this.tableData = response.data.result;
              this.$message({
                type: 'success',
                message: response.data.message,

              });
              this.dialogMergeFormVisible2 = false;
              this.list()
            })
          }
        });
      },
      dictAdd: function(index, row) {
        // console.log("11111");

        this.dialogMergeFormVisible = true;
      },
      Update: function(index, row) {
        // console.log( (this.mergeForm.dictIsEditable = row.dictIsEditable)===1);
        this.mergeForm.id = row.id;
        this.mergeForm.name = row.name;
        this.mergeForm.userName = row.userName;
        this.mergeForm.mobile = row.mobile;
        this.mergeForm.password = row.password;
        this.mergeForm.email = row.email;
        // this.checked = true;
        this.dialogMergeFormVisible2 = true;
      },
      handleSizeChange(rows) {
        console.log('rows=%i', rows);
        this.queryForm.page = 1;
        this.queryForm.rows = rows;
        this.list();
      },
      handleCurrentChange(page) {
        console.log('page=%i', page);
        this.queryForm.page = page;
        this.list();
      },
      Delete: function(index, row) {
        console.log(index);
        this.$confirm('确认删除此条记录?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.axios.post(this.axios.urls.EMPLOYEE_DELETE, {
            id: row.id
          }).then((response) => {
            this.$message({
              type: 'success',
              message: '删除成功!',
            });
            this.list();
          })
        });
      }
    },
    created: function() {
      this.list()
    },
    watch: {
      dialogMergeFormVisible: function(val, oldVal) {
        if (false === val) {
          this.mergeForm.name = null;
          this.mergeForm.userName = null;
          this.mergeForm.mobile = null;
          this.mergeForm.email = null;
          this.mergeForm.password = null;
          this.$refs['mergeForm'].clearValidate();
        }
        console.log('new: %s, old: %s', val, oldVal)
      }
    },
    watch: {
      dialogMergeFormVisible2: function(val, oldVal) {
        if (false === val) {
          this.mergeForm.name = null;
          this.mergeForm.userName = null;
          this.mergeForm.mobile = null;
          this.mergeForm.email = null;
          this.mergeForm.password = null;
          this.$refs['mergeForm'].clearValidate();
        }
        console.log('new: %s, old: %s', val, oldVal)
      }
    }
  }
</script>

<style scoped>
  .user-search {
    margin-top: 20px;
  }

  .userRole {
    width: 100%;
  }

  .block {
    margin-top: 10px;
    text-align: center;
  }
</style>
